<template>
  <div class="box">
    <div class="con">
      <ul class="item">
        <li
          @mousemove="showIndex(k)"
          v-for="(v, k) in itemList"
        >
          {{ v }}
        </li>
      </ul>
      <div class="search">
        <el-input
          class="inputbox"
          placeholder="请输入内容"
          v-model="searchCon"
        >
        </el-input>
        <el-button
          class="searchBtn"
          type="primary"
          icon="el-icon-search"
        ></el-button>
      </div>
    </div>

    <div class="hidebox" @mouseleave="hideIndex">
      <el-collapse-transition>
        <div v-show="show3">
          <ul>
            <li v-for="prod in productList[index]">
              <div class="img">
                <img :src="require(`@/assets/img/${prod.path}`)" alt="" />
              </div>
              <p class="productname">{{ prod.productN }}</p>
              <p class="price">{{ prod.price }}<label>元起</label></p>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: "",
      show3: true,
      searchCon: "",
      itemList: [
        "Xiaomi手机",
        "Redmi手机",
        "电视",
        "笔记本",
        "平板",
        "家电",
        "路由器",
        "服务中心",
        "社区",
      ],
      productList: [
        [
          { path: "1.jpg", productN: "Xiaomi MIX Fold4", price: "8999" },
          { path: "1.jpg", productN: "Xiaomi MIX Fold4", price: "7999" },
        ],
        [
          { path: "1.jpg", productN: "Redmi MIX Fold3", price: "8999" },
          { path: "1.jpg", productN: "Redmi MIX Fold3", price: "7999" },
        ],
      ],
    };
  },
  methods: {
    showIndex: function (index) {
      this.index = index;
      this.show3 = true;
    },
    hideIndex: function () {
      this.show3 = false;
    }
  },
  computed: {},
};
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.con {
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  text-align: center;
  width: 1500px;
  position: relative;
}

.item li {
  float: left;
  width: 100px;
}
.item li:hover {
  color: #409eff;
  cursor: pointer;
}
.search {
  float: right;
  height: 60px;
}
.search .inputbox {
  float: left;
  width: 300px;
}
.search .searchBtn {
  float: left;
  margin-top: 10px;
}
.hidebox {
  width: 1500px;
  position: absolute;
  left: 205px;
  background-color: #fff;
  z-index: 99999;
  text-align: center;
}
.hidebox ul li {
  float: left;
}
</style>
